<template>
  <div class="container">

    <div class="tips-title">1.基础用法</div>
    <template>
      <el-radio v-model="radio1" label="A">Select A</el-radio>
      <el-radio v-model="radio1" label="B">Select B</el-radio>
      <el-radio disabled v-model="radio1" label="C">Select C</el-radio>
    </template>

    <div class="tips-title">2.单选框组<span class="tips-explain">el-radio-group</span></div>
    <template>
      <el-radio-group v-model="radio2">
        <el-radio :label="1">Select 1</el-radio>
        <el-radio :label="2">Select 2</el-radio>
        <el-radio :label="3">Select 3</el-radio>
      </el-radio-group>
    </template>

    <div class="tips-title">3.按钮样式<span class="tips-explain">el-radio-button，可设置4种大小: medium / small / mini 。</span></div>
    <template>
      <div>
        <el-radio-group v-model="radio3">
          <el-radio-button label="beijing">北京</el-radio-button>
          <el-radio-button label="shanghai">上海</el-radio-button>
          <el-radio-button label="guangzhou">广州</el-radio-button>
          <el-radio-button label="shenzhen">深圳</el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio4" size="medium">
          <el-radio-button label="beijing">北京</el-radio-button>
          <el-radio-button label="shanghai">上海</el-radio-button>
          <el-radio-button label="guangzhou">广州</el-radio-button>
          <el-radio-button label="shenzhen">深圳</el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio5" size="small">
          <el-radio-button label="beijing">北京</el-radio-button>
          <el-radio-button label="shanghai">上海</el-radio-button>
          <el-radio-button label="guangzhou">广州</el-radio-button>
          <el-radio-button label="shenzhen">深圳</el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio6" disabled size="mini">
          <el-radio-button label="beijing">北京</el-radio-button>
          <el-radio-button label="shanghai">上海</el-radio-button>
          <el-radio-button label="guangzhou">广州</el-radio-button>
          <el-radio-button label="shenzhen">深圳</el-radio-button>
        </el-radio-group>
      </div>
    </template>
    <div class="tips-title">4.带有边框<span class="tips-explain">border</span></div>
    <template>
      <div>
        <el-radio v-model="radio7" label="1" border>备选项1</el-radio>
        <el-radio v-model="radio7" label="2" border>备选项2</el-radio>
      </div>
      <div style="margin-top: 20px">
        <el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>
        <el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio9" size="small">
          <el-radio label="1" border>备选项1</el-radio>
          <el-radio label="2" border disabled>备选项2</el-radio>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio10" size="mini" disabled>
          <el-radio label="1" border>备选项1</el-radio>
          <el-radio label="2" border>备选项2</el-radio>
        </el-radio-group>
      </div>
    </template>
  </div>
</template>
<script>
  export default {
    name: 'f-radio',
    data() {
      return {
        radio1: 'A',
        radio2: 3,
        radio3: 'beijing',
        radio4: 'shanghai',
        radio5: 'guangzhou',
        radio6: 'shenzhen',
        radio7: '1',
        radio8: '2',
        radio9: '1',
        radio10: '2'
      }
    }
  }
</script>
<style>

</style>

